<link rel="import" href="../../bower/polymer/polymer.html">
<link rel="import" href="../../bower/core-signals/core-signals.html">
<link rel="import" href="../../bower/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../../bower/core-toolbar/core-toolbar.html">
<link rel="import" href="../../bower/core-icon-button/core-icon-button.html">
<link rel='import' href='../../bower/paper-fab/paper-fab.html'>
<link rel="import" href="../../bower/paper-toast/paper-toast.html">
<link rel="import" href="../../bower/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower/core-tooltip/core-tooltip.html">
<link rel="import" href="../../bower/core-overlay/core-overlay.html">
<link rel='import' href='advanced-settings.html'>
<link rel='import' href='app-bar.html'>
<link rel='import' href='browser-elements.html'>
<link rel='import' href='bubble.html'>
<link rel='import' href='button.html'>
<link rel='import' href='dialog.html'>
<link rel="import" href='faq.html'>
<link rel='import' href='feedback.html'>
<link rel="import" href="i18n-filter.html">
<link rel='import' href='icons.html'>
<link rel='import' href='invite-user.html'>
<link rel="import" href='logs.html'>
<link rel='import' href='proxy-error.html'>
<link rel='import' href='reconnect.html'>
<link rel="import" href='roster.html'>
<link rel="import" href='settings.html'>
<link rel="import" href='splash.html'>
<link rel='import' href='state.html'>
<link rel='import' href='troubleshoot.html'>

<polymer-element name='uproxy-root' attributes='model'>
  <template>
    <style>
      :host {
        font-family: Roboto, sans-serif;
        text-align: start;
        color: rgb(112, 112, 112);
      }
      paper-tabs::shadow #selectionBar {
        /*
         * we are seeing an issue with the bar when initially loading it where
         * the width will be set to 0 since the actual buttons are not rendered
         * yet, this will cause the default to be 50% instead of 0
         */
        width: 50%;
        background-color: #20F1DE;
      }
      paper-tab {
        cursor: pointer;
        font-weight: 400;
        letter-spacing: 0.25px;
      }
      paper-tab::shadow #ink {
        color: #20F1DE;
        opacity: .4;
      }
      /* Since notification number should always be opacity = 1, we force
         the .tab-content to be opacity = 1 and instead add the
         .notSelected class to just tab text. There's no way to have
         .tab-content opacity of 0.6 while its child element (the
         number) has opacity 1.  */
      paper-tab::shadow .tab-content{
        font-size: 14px;
        text-transform: uppercase;
        opacity: 1 !important;
      }
      paper-tab .notSelected {
        opacity: 0.6;
      }
      paper-tab .tabNotificationNumber {
        margin-left: 10px;
        margin-bottom: 1px;
        padding: 3px 6px;
        background-color: #11B6A7;
        border-radius: 50%;
        font-weight: 400;
        font-size: 10px;
      }
      paper-tab .withNotification {
        padding-left: 10px;
      }
      core-drawer-panel {
        overflow: auto;
      }
      core-header-panel {
        height: 100%;
      }
      core-header-panel::shadow #dropShadow {
        box-shadow: inset 0px 5px 6px -3px rgba(0,0,0,0.13);
      }
      core-toolbar {
        width: 100%;
        background-color: #12A391;
        color: white;
      }
      core-toolbar.hasContacts {
        height: 105px;
      }
      core-toolbar::shadow #topBar {
        padding: 0px 16px;
        height: 60px;
      }
      #menu-button {
        opacity: 0.6;
        cursor: pointer;
        -webkit-transition: all 0.23s;
        -moz-transition: all 0.23s;
        transition: all 0.23s;
      }
      #menu-button:hover {
        opacity: 1;
        box-shadow: none;
      }
      core-toolbar #title {
        font-size: 20px;
        margin: 0px 36px;
        letter-spacing: 0.25px;
      }
      core-toolbar core-icon.status {
        cursor: pointer;
        color: #006A5A;
        height: 20px !important;
        width: 20px !important;
      }
      #settings {
        top: 0;
      }
      #rosterContainer {
        height: 100%;
      }
      #rosterContainer #roster-panel {
        overflow: auto;
      }
      #rosterContainer uproxy-roster {
        overflow-y: auto;
        display: block;
      }
      .statusRow {
        width: 100%;
        height: 58px;
        background-color: #283230;
      }
      .statusRow .statusText {
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 19px;
        white-space: nowrap;
        font-size: 14px;
      }
      .statusText, .statusText [flex] {
        /* cut off the statusText itself, or any contained flex-grow element */
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .statusRow core-icon {
        padding-right: 20px;
      }
      .statusRow a, .statusRow core-icon {
        color: #0EC5AF;
      }
      .statusRow.error core-icon {
        color: #DD2D2D;
      }
      uproxy-bubble {
        z-index: 1;
        font-size: 13px; /* reset to normal, core-toolbar interferes with font sizes */
      }
      uproxy-action-dialog {
        top: 20%;
        z-index: 1002; /* Must be greater than core-overlay-backdrop */
      }
      uproxy-action-dialog::shadow #scroller {
        overflow: visible;
        padding: 30px 30px 0px 30px;
      }
      .core-overlay-backdrop {
        z-index: 1001;
      }
      uproxy-action-dialog uproxy-button {
        margin-bottom: 3px;
      }
      uproxy-action-dialog h1 {
        font-size: 1.4em;
        color: #12A391;
        font-weight: normal;
      }
      #dialogMessage {
        line-height: 20px;
        color: #666;
        font-weight: 300;
        letter-spacing: 0.4px;
        margin: 0;
      }
      #dialog uproxy-faq-link {
        font-weight: bold;
      }
      #disconnectDialog {
        text-align: center;
      }
      #disconnectDialog h1 {
        font-size: 1.25em;
      }
      #disconnectDialog img {
        height: 50px;
        width: 50px;
      }
      #disconnectDialog #disconnectDialogText {
        text-align: start;
      }
      #disconnectDialog uproxy-button {
        font-size: 12px;
      }
      #statsDialog {
        height: 100%;
        width: 100%;
        background-color: white;
      }
      #statsDialog div {
        padding: 30px;
        overflow: hidden;
      }
      #statsDialog uproxy-button {
        margin: 1.5em 0.75em;
      }
      #statsDialog uproxy-faq-link {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        border-top: 1px solid rgb(221, 221, 221);
        display: block;
        text-align: center;
        font-size: 1.1em;
        line-height: 24px;
        bottom: 0;
        position: fixed;
      }
      #statsDialog p {
        line-height: 19px;
      }
      #statsDialog #enableStatsButton {
        float: left;
      }
      #statsDialog #disableStatsButton {
        float: right;
      }
      #progressWrapper {
        text-align: center;
      }
      paper-toast {
        position: fixed;
        left: 12px;
        right: 12px;
        background-color: #283230;
        padding: 16px 16px 12px 20px;
        font-size: 12px;
      }
      paper-toast #toastHelpLink {
        color: #47B5AA;
      }
      #inviteButton {
        color: white;
        background-color: #34ceb9;  /* teal */
        position: absolute;
        right: 35px;
        /* Needed to make button clickable on Firefox issue #1905 */
        z-index: 1;
        height: 56px;
        width: 56px;
        padding: 15px;
      }
      #inviteButton /deep/ core-icon {
        /* Override default styles which result in a 24x24 icon */
        height: 18px;
        width: 18px;
        /* Necessary to position our smaller icon correctly */
        margin: 4px auto 0;
      }
      core-icon[icon=clear] {
        position: absolute;
        top: 15px;
        right: 15px;
        color: rgb(180,180,180);
        cursor: pointer;
      }
    </style>
    <uproxy-state id="state"></uproxy-state>

    <core-signals
        on-core-signal-close-settings="{{ closeSettings }}"
        on-core-signal-open-dialog="{{ openDialog }}"
        on-core-signal-show-toast="{{ showToast }}"
        on-core-signal-update-getting-status="{{ updateGettingStatus }}"
        on-core-signal-update-sharing-status="{{ updateSharingStatus }}"
        on-core-signal-backbutton="{{ handleBackButton }}">
    </core-signals>

    <div id='browserElementContainer' hidden?='{{ui_constants.View.BROWSER_ERROR !== ui.view}}'></div>

    <!-- core-overlays, launched using core-signals -->
    <uproxy-invite-user id='inviteUser'></uproxy-invite-user>
    <uproxy-google-invite></uproxy-google-invite>
    <uproxy-logs></uproxy-logs>
    <uproxy-feedback id='feedback'></uproxy-feedback>
    <uproxy-faq id='faq'></uproxy-faq>
    <uproxy-advanced-settings id='advancedSettings'></uproxy-advanced-settings>

    <uproxy-splash id='splash' hidden?='{{ui_constants.View.SPLASH!=ui.view}}'>
    </uproxy-splash>

    <core-drawer-panel id='mainPanel' forceNarrow='true' drawerWidth='300px'
        hidden?='{{ ui.view !== ui_constants.View.ROSTER }}' rightDrawer='{{ dir == "rtl" ? true : false }}'>
      <core-header-panel drawer>
        <div class='content' fit>
          <uproxy-settings id='settings' fit></uproxy-settings>
        </div>
      </core-header-panel>
      <core-header-panel main
          hidden?='{{ ui.view !== ui_constants.View.ROSTER }}'>

        <core-toolbar class="{{ {hasContacts: hasContacts} | tokenList }}">

          <core-icon-button id="menu-button" icon="menu" core-drawer-toggle></core-icon-button>
          <div id='title' flex>uProxy</div>

          <core-tooltip id='statsTooltip' label='{{ "STATS_ENABLED_TOOLTIP" | $$(model.globalSettings.language) }}' position='{{ dir == "rtl" ? "right" : "left" }}'>
            <core-icon icon='uproxy-icons:stats-enabled' class='status'
              hidden?='{{ !model.globalSettings.statsReportingEnabled }}' on-tap='{{ statsIconClicked }}'></core-icon>
          </core-tooltip>

          <core-tooltip label='{{ "SHARING_ENABLED_TOOLTIP" | $$(model.globalSettings.language) }}' position='{{ dir == "rtl" ? "right" : "left" }}'>
            <core-icon id='sharingEnabledIcon' icon='uproxy-icons:share' class='status'
              hidden?='{{ !isSharingEnabledWithOthers }}'
              on-tap='{{ setShareMode }}'></core-icon>
          </core-tooltip>

          <uproxy-bubble on-closed='{{ closedSharing }}' active='{{ !model.globalSettings.hasSeenSharingEnabledScreen && isSharingEnabledWithOthers }}'>
            <h3>{{ "SHARING_ENABLED_TITLE" | $$(model.globalSettings.language) }}</h3>
            <p>{{ "SHARING_ENABLED_MESSAGE" | $$(model.globalSettings.language) }}</p>
          </uproxy-bubble>

          <div class='bottom fit' dir="ltr" hidden?='{{ !hasContacts }}'>
            <paper-tabs id='modeTabs' selected='{{ model.globalSettings.mode }}' on-core-activate='{{ tabSelected }}'>
              <paper-tab>
                <span class='{{ {notSelected: model.globalSettings.mode != ui_constants.Mode.GET, withNotification: model.contacts.getAccessContacts.pending.length > 0} | tokenList }}'>{{ "GET_ACCESS" | $$(model.globalSettings.language) }}</span>
                <span class='tabNotificationNumber'
                  hidden?='{{ model.contacts.getAccessContacts.pending.length === 0 }}'>
                  {{ model.contacts.getAccessContacts.pending.length }}
                </span>
              </paper-tab>
              <paper-tab>
                <span class='{{ {notSelected: model.globalSettings.mode != ui_constants.Mode.SHARE, withNotification: model.contacts.shareAccessContacts.pending.length > 0} | tokenList }}'>{{ "SHARE_ACCESS" | $$(model.globalSettings.language) }}</span>
                <span class='tabNotificationNumber'
                  hidden?='{{ model.contacts.shareAccessContacts.pending.length === 0 }}'>
                  {{ model.contacts.shareAccessContacts.pending.length }}
                </span>
              </paper-tab>
            </paper-tabs>
          </div>
        </core-toolbar>

        <div class='content' fit>

          <div id='rosterContainer' vertical layout>
            <div id='roster-panel' flex>
              <uproxy-roster id='get-roster'
                  hidden?='{{model.globalSettings.mode!=ui_constants.Mode.GET}}'
                  contacts='{{model.contacts.getAccessContacts}}'
                  mode='{{ui_constants.Mode.GET}}'>
              </uproxy-roster>
              <uproxy-roster id='share-roster'
                  hidden?='{{model.globalSettings.mode!=ui_constants.Mode.SHARE}}'
                  contacts='{{model.contacts.shareAccessContacts}}'
                  mode='{{ui_constants.Mode.SHARE}}'>
              </uproxy-roster>
            </div>

            <div id='status'>
              <div class='statusRow error' hidden?='{{ ui.browserApi.canProxy }}'>
                <div class='statusText' horizontal layout>
                  <core-icon icon='warning'></core-icon>
                  <span flex>
                    {{ "OTHER_PROXY_IN_USE_ERR" | $$ }}
                  </span>
                  <a href='#' on-tap='{{ openProxyError }}'>{{ "GET_HELP" | $$ }}</a>
                </div>
              </div>
              <div class='statusRow error' hidden?='{{ !(model.globalSettings.reproxy.enabled && model.reproxyError) }}'>
                <div class='statusText' horizontal layout>
                  <core-icon icon='warning'></core-icon>
                  <span flex>
                    {{ "REPROXY_ERR" | $$ }}
                  </span>
                  <a href='#' on-tap='{{ openReproxyError }}'>{{ "GET_HELP" | $$ }}</a>
                </div>
              </div>
              <div class='statusRow' hidden?='{{!gettingStatus}}'>
                <div class='statusText'>
                  <core-icon icon='uproxy-icons:receive'></core-icon>
                  {{gettingStatus}}
                </div>
              </div>
              <div class='statusRow' hidden?='{{!sharingStatus}}'>
                <div class='statusText'>
                  <core-icon icon='uproxy-icons:share'></core-icon>
                  {{sharingStatus}}
                </div>
              </div>
              <div class='statusRow' hidden?='{{!ui.availableVersion}}'>
                <div class='statusText' horizontal layout>
                  <span flex>
                    {{ "UPDATE_AVAILABLE" | $$(model.globalSettings.language) }}
                  </span>
                  <a href='#' on-tap='{{ restart }}'>{{ "RESTART_UPROXY_UPDATE" | $$(model.globalSettings.language) }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Elements (like the paper fab) that determine position based on proxying/error statuses, must come after the status elements above. Otherwise the positioning will be incorrect. -->
        <!-- src/cca/app/polymer/workarounds.ts attaches an on-tap handler to
             this #inviteButton element to work around #2659 (see PR #2751).
             Make sure to keep the id etc. synced up if changing. -->
        <paper-fab id="inviteButton"
          mini src='../icons/plus_white.svg'
          on-tap='{{ fireOpenInviteUserPanel }}'
          style='bottom: {{ $.status.offsetHeight + 35 }}px;'></paper-fab>
      </core-header-panel>
    </core-drawer-panel>

    <!-- Dialog is opened when .toggle() is called in openDialog -->
    <!-- Without layered="false", styling needs to be prefixed with 'html /deep/' in order to have effect on the dialog contents.'  -->
    <uproxy-action-dialog backdrop layered="false" id="dialog" on-core-overlay-close-completed="{{reusableDialogClosed}}" closeSelector=''>
      <core-icon icon="clear" on-tap='{{ closeDialog }}'></core-icon>
      <h1 id='dialogHeading'></h1>
      <p id='dialogMessage'></p>
      <div hidden?='{{ !dialog.userInputData }}'>
        <paper-input-decorator label='{{ dialog.userInputData.placeholderText }}' layout vertical error="{{ 'REQUIRED_FIELD' | $$(model.globalSettings.language) }}" isInvalid='{{ isUserInputInvalid }}'>
          <input id='dialogInput' is='core-input'/>
        </paper-input-decorator>
      </div>
      <div hidden?='{{ !dialog.displayData }}'>
        <paper-input-decorator layout vertical>
          <input id='dialogDisplay' readonly is='core-input' on-tap='{{ selectAll }}' />
        </paper-input-decorator>
      </div>
      <template repeat='{{ button in dialog.buttons }}'>
        <uproxy-button
          affirmative?='{{ !button.dismissive }}'
          dismissive?='{{ button.dismissive }}'
          class='dialogButton'
          on-tap='{{ dialogButtonClick }}'>
          {{button.text}}
        </uproxy-button>
      </template>
    </uproxy-action-dialog>

    <uproxy-action-dialog id='disconnectDialog' backdrop layered="false"
        opened="{{ !!ui.disconnectedWhileProxying }}" autoCloseDisabled>
      <img src='../icons/128_error.png'>
      <div id="disconnectDialogText">
        <h1>{{ "DISCONNECTED_TITLE" | $$(model.globalSettings.language) }}</h1>
        <div id='progressWrapper' hidden?='{{ !ui.mapInstanceIdToUser_[ui.disconnectedWhileProxying] }}'>
          <div hidden?='{{ !ui.instanceTryingToGetAccessFrom }}'>
            <strong>{{ 'RECONNECTING' | $$(model.globalSettings.language) }}</strong>
            <paper-progress indeterminate='true'></paper-progress>
          </div>
          <div hidden?='{{ !!ui.instanceTryingToGetAccessFrom }}'>
            <strong>{{ 'RECONNECT_FAILED' | $$(model.globalSettings.language) }}</strong>
            <uproxy-button class='dialogButton' on-tap='{{ restartProxying }}'>{{ 'RESTART_PROXYING' | $$(model.globalSettings.language) }}</uproxy-button>
          </div>
        </div>
        <p>
          {{ "DISCONNECTED_MESSAGE" | $$(model.globalSettings.language) }}
        </p>
      </div>
      <uproxy-button class='dialogButton' on-tap='{{ revertProxySettings }}'>{{ "CONTINUE_BROWSING" | $$(model.globalSettings.language) }}</uproxy-button>
    </uproxy-action-dialog>

    <uproxy-troubleshoot titleText='{{ troubleshootTitle }}'></uproxy-troubleshoot>

    <uproxy-proxy-error id='proxyError'></uproxy-proxy-error>

    <uproxy-dialog id='reproxyError' backdrop layered='false'>
      <core-icon class="close button" icon="clear" on-tap='{{ closeReproxyError }}'></core-icon>
      <h2>{{ "REPROXY_ERR" | $$ }}</h2>
      <p>{{ "REPROXY_ERROR_DETAILS" | $$ }}</p>
    </uproxy-dialog>

    <paper-toast id='toast'
        text='{{ toastMessage }}' responsiveWidth='320px'
        style='bottom: {{ topOfStatuses($.status.offsetHeight, ui.view == ui_constants.View.ROSTER && !$.feedback.opened) + 10 }}px;'
        duration='10000'>
      <div id='toastHelpLink' on-tap="{{ openTroubleshoot }}"
          hidden?='{{ !unableToShare && !unableToGet }}'>{{ "GET_HELP" | $$(model.globalSettings.language) }}
      </div>
    </paper-toast>

    <uproxy-reconnect></uproxy-reconnect>

  </template>

  <script src='root.js'></script>

</polymer-element>
